<template>
  <div class="qusetion-form">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-form"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="试题类型" prop="type">
            <QuestionTypeSelect
              :defaultValue="form.type"
              @emit="(v) => (form.type = v)"
              :disabled="form.hasOwnProperty('id')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试题难度" prop="difficulty">
            <QuestionDifficultySelect
              :defaultValue="form.difficulty"
              @emit="(v) => (form.difficulty = v)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属题库" prop="bankId">
            <QuestionBankTitleSelect
              :defaultValue="form.bankId"
              @emit="(v) => (form.bankId = v)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试题来源" prop="source">
            <el-input v-model="form.source"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="试题标签" prop="tags">
        <el-input v-model="form.tags"></el-input>
      </el-form-item>

      <el-form-item label="试题状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="1">正常</el-radio>
          <el-radio label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <TestType ref="testType" :initForm="form" @sendForm="sendForm" />

      <el-form-item label="题目解析">
        <ExamUEditor :defaultMsg="form.subAnalysis" ref="UEditorSubAnalysis" />
      </el-form-item>
      <el-form-item>
        <el-button type="custom" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {
    TestType: () => import('./TestType.vue'),
    QuestionTypeSelect: () => import('../public/QuestionTypeSelect.vue'),
    QuestionDifficultySelect: () =>
      import('../public/QuestionDifficultySelect.vue'),
    QuestionBankTitleSelect: () =>
      import('../public/QuestionBankTitleSelect.vue'),
  },
  data() {
    return {
      form: {
        title: '', //题干
        bankId: '', //所属题库
        source: '', //试题来源
        tags: '', //试题标签
        status: '1', //状态，1-正常，2-禁用
        type: '', //试题类型，1-单选题，2-多选题，3-判断题，4-填空题，5-问答题，6-附件题
        difficulty: '', //难度，1-极易，2-容易，3-一般，4-较难，5-极难
        subAnalysis: '', //题目解析
      },
      rules: {
        title: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择试题状态', trigger: 'change' },
        ],
        bankId: [
          { required: true, message: '请选择所属题库', trigger: 'change' },
        ],
        type: [
          { required: true, message: '请选择试题类型', trigger: 'change' },
        ],
        difficulty: [
          { required: true, message: '请选择试题难度', trigger: 'change' },
        ],
      },
    }
  },
  computed: {
    activeRow() {
      return this.$store.state.question.activeRow
    },
  },
  watch: {
    activeRow: {
      immediate: true,
      handler(row) {
        this.init(row)
      },
    },
  },
  methods: {
    //显示弹窗
    init(row) {
      if (row.hasOwnProperty('id')) {
        this.form = { ...this.form, ...row }
        this.$set(this.form, 'id', row.id)
      } else {
        this.form = this.$options.data().form
        this.$delete(this.form, 'id')
      }
    },
    sendForm(v) {
      Object.assign(this.form, v)
    },
    submitForm(formName) {
      this.form.subAnalysis = this.$refs.UEditorSubAnalysis.message
      this.$refs.testType.test()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.verifyForm()
        }
      })
    },
    //验证题型必填
    async verifyForm() {
      let { title, subAnswer, type, subjectOptionsVOList } = this.form
      if (!title) {
        this.warnMsg('题干不能为空')
        return
      }
      //单选题
      if (type == 1 && !subAnswer) {
        this.warnMsg('请选择一个正确答案')
        return
      }
      //多选题
      if (type == 2) {
        let checkedBoxs = JSON.parse(subAnswer)
        if (!checkedBoxs.length) {
          this.warnMsg('请至少选择一个正确答案')
          return
        }
      }
      //单选题|多选题选项是否为空
      if (type == 1 || type == 2) {
        let option = []
        subjectOptionsVOList.forEach((v) => {
          if (!v.contents) {
            option.push(v.tag)
          }
        })
        if (option.length) {
          this.warnMsg(`选项${option}不能为空`)
          return
        }
      }
      //填空题
      if (type == 4) {
        let arr = JSON.parse(subAnswer)
        if (!arr.length) {
          this.warnMsg('请至少设置一个空格')
          return
        }
        let blank = []
        arr.forEach((v) => {
          if (!v.value) {
            blank.push(v.key)
          }
        })
        if (blank.length) {
          this.warnMsg(`空格${blank}答案不能为空`)
          return
        }
      }
      //简答题
      if (type == 5 && !subAnswer) {
        this.warnMsg('请输入参考答案')
        return
      }
      let dispatchType = this.activeRow.hasOwnProperty('id')
        ? 'testSubjectsUPDATE'
        : 'testSubjectsADD'
      await this.$store.dispatch(dispatchType, this.form)
      this.$store.commit('SET_ACTIVENAME', 'manage')
    },
  },
}
</script>
<style scoped>
.qusetion-form {
  max-width: 800px;
}
.qusetion-form >>> .el-select {
  width: 290px;
}
</style>